<template>
  <div class="projects-admin-page">
    <!-- 页面头部 -->
    <div class="admin-page-header">
      <div class="header-background"></div>
      <div class="header-content">
        <div class="header-left">
          <div class="title-section">
            <h1 class="page-title">项目管理</h1>
          </div>
        </div>
        <div class="header-actions">
          <el-button
            type="primary"
            :icon="Plus"
            @click="createProject"
            class="action-btn-primary"
          >
            新建项目
          </el-button>
          <el-button
            :icon="Upload"
            @click="showImportDialog = true"
            class="action-btn-secondary"
          >
            批量导入
          </el-button>
          <el-button
            :icon="Download"
            @click="exportProjects"
            class="action-btn-secondary"
          >
            导出数据
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6">
        <div class="stat-card total-projects">
          <div class="stat-gradient-bg"></div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.total }}</div>
            <div class="stat-label">总项目数</div>
            <div class="stat-trend">
              <span class="trend-up">+12%</span>
              <i class="fa:trending-up"></i>
            </div>
          </div>
          <div class="stat-icon">
            <div class="icon-wrapper">
              <Icon name="fa:folder-open" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card published-projects">
          <div class="stat-gradient-bg"></div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.published }}</div>
            <div class="stat-label">已发布</div>
            <div class="stat-trend">
              <span class="trend-up">+8%</span>
              <i class="fa:trending-up"></i>
            </div>
          </div>
          <div class="stat-icon">
            <div class="icon-wrapper">
              <Icon name="fa:rocket" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card draft-projects">
          <div class="stat-gradient-bg"></div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.draft }}</div>
            <div class="stat-label">草稿</div>
            <div class="stat-trend">
              <span class="trend-neutral">-2%</span>
              <Icon name="fa:minus" />
            </div>
          </div>
          <div class="stat-icon">
            <div class="icon-wrapper">
              <Icon name="fa:edit" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card archived-projects">
          <div class="stat-gradient-bg"></div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.archived }}</div>
            <div class="stat-label">已完成</div>
            <div class="stat-trend">
              <span class="trend-down">-5%</span>
              <i class="fa:trending-down"></i>
            </div>
          </div>
          <div class="stat-icon">
            <div class="icon-wrapper">
              <Icon name="fa:check-circle" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
      <div class="filter-header">
        <div class="filter-title">
          <Icon name="fa:filter"></Icon>
          筛选条件
        </div>
        <div class="filter-actions">
          <el-button type="primary" @click="refreshData" class="search-btn">
            <Icon name="fa:search" />
            搜索
          </el-button>
          <el-button @click="resetFilters" class="reset-btn">
            <Icon name="fa:refresh" />
            重置
          </el-button>
          <el-button
            @click="showAdvancedFilter = !showAdvancedFilter"
            class="advanced-btn"
            :class="{ active: showAdvancedFilter }"
          >
            <Icon name="fa:cog" />
            高级筛选
          </el-button>
        </div>
      </div>

      <div class="filter-content">
        <el-row :gutter="16">
          <el-col :xs="24" :sm="12" :md="6">
            <div class="filter-item">
              <label class="filter-label"> 关键词搜索 </label>
              <el-input
                v-model="searchKeyword"
                placeholder="输入项目名称、描述或技术栈..."
                clearable
              />
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="4">
            <div class="filter-item">
              <label class="filter-label"> 项目状态 </label>
              <el-select
                v-model="filterStatus"
                placeholder="选择状态"
                clearable
                class="custom-select"
              >
                <el-option label="全部状态" value="" />
                <el-option value="draft">草稿</el-option>
                <el-option value="inProgress">进行中</el-option>
                <el-option value="published">已发布</el-option>
                <el-option value="archived">已完成</el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="4">
            <div class="filter-item">
              <label class="filter-label"> 项目分类 </label>
              <el-select
                v-model="filterCategory"
                placeholder="选择分类"
                clearable
                class="custom-select"
              >
                <el-option label="全部分类" value="" />
                <el-option
                  v-for="category in categories"
                  :key="category.id"
                  :label="category.name"
                  :value="category.id"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="filter-item">
              <label class="filter-label"> 时间范围 </label>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                class="custom-date-picker"
              />
            </div>
          </el-col>
        </el-row>

        <!-- 高级筛选 -->
        <div v-if="showAdvancedFilter" class="advanced-filter">
          <div class="advanced-header">
            <span class="advanced-title">高级筛选选项</span>
            <div class="advanced-divider"></div>
          </div>
          <el-row :gutter="16">
            <el-col :xs="24" :sm="12" :md="6">
              <div class="filter-item">
                <label class="filter-label"> 特色项目 </label>
                <el-select
                  v-model="filterFeatured"
                  placeholder="特色项目筛选"
                  clearable
                  class="custom-select"
                >
                  <el-option label="全部项目" value="" />
                  <el-option label="特色项目" value="true" />
                  <el-option label="普通项目" value="false" />
                </el-select>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
              <div class="filter-item">
                <label class="filter-label"> 排序字段 </label>
                <el-select
                  v-model="sortField"
                  placeholder="选择排序字段"
                  class="custom-select"
                >
                  <el-option label="创建时间" value="createdAt" />
                  <el-option label="更新时间" value="updatedAt" />
                  <el-option label="浏览量" value="views" />
                  <el-option label="项目标题" value="title" />
                </el-select>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
              <div class="filter-item">
                <label class="filter-label"> 排序方式 </label>
                <el-select
                  v-model="sortOrder"
                  placeholder="选择排序方式"
                  class="custom-select"
                >
                  <el-option label="降序排列" value="desc" />
                  <el-option label="升序排列" value="asc" />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 批量操作栏 -->
    <div class="batch-actions">
      <div class="batch-info">
        <span class="selected-count">
          <i class="fa:check-circle"></i>
          已选择 {{ selectedProjects.length }} 个项目
        </span>
      </div>
      <div class="batch-buttons">
        <el-button
          size="small"
          type="primary"
          @click="batchPublish"
          class="batch-btn"
        >
          <i class="fa:play"></i>
          批量发布
        </el-button>
        <el-button
          size="small"
          type="warning"
          @click="batchArchive"
          class="batch-btn"
        >
          <i class="fa:archive"></i>
          批量归档
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="confirmBatchDelete"
          class="batch-btn batch-btn-danger"
        >
          <i class="fa:trash"></i>
          批量删除
        </el-button>
        <el-button
          size="small"
          @click="clearSelection"
          class="batch-btn batch-btn-cancel"
        >
          <i class="fa:times"></i>
          取消选择
        </el-button>
      </div>
    </div>

    <!-- 项目列表 -->
    <div class="projects-list-container">
      <!-- 骨架屏加载状态 -->
      <div v-if="loading" class="projects-list">
        <div v-for="n in 6" :key="n" class="project-item skeleton-item">
          <div class="skeleton-selection"></div>
          <div class="skeleton-content">
            <div class="skeleton-thumbnail"></div>
            <div class="skeleton-details">
              <div class="skeleton-title"></div>
              <div class="skeleton-description"></div>
              <div class="skeleton-meta">
                <div class="skeleton-meta-item"></div>
                <div class="skeleton-meta-item"></div>
                <div class="skeleton-meta-item"></div>
              </div>
            </div>
            <div class="skeleton-actions">
              <div class="skeleton-button"></div>
              <div class="skeleton-button"></div>
              <div class="skeleton-button"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实际项目列表 -->
      <div v-else class="projects-list">
        <div
          v-for="project in paginatedProjects"
          :key="project.id"
          class="project-item"
          :class="{
            'featured-item': project.featured,
            'selected-item': selectedProjects.some((p) => p.id === project.id),
          }"
        >
          <!-- 选择框 -->
          <div class="item-selection">
            <el-checkbox
              :model-value="selectedProjects.some((p) => p.id === project.id)"
              @change="toggleProjectSelection(project)"
            />
          </div>

          <!-- 项目内容 -->
          <div class="item-content">
            <!-- 缩略图 -->
            <div class="item-thumbnail">
              <img
                v-if="project.cover_image_url"
                :src="project.cover_image_url"
                :alt="project.title"
                class="thumbnail-image"
              />
              <div v-else class="thumbnail-placeholder">
                <i class="fa:image"></i>
              </div>
            </div>

            <!-- 项目信息 -->
            <div class="item-details">
              <div class="item-header">
                <div class="item-title-section">
                  <h3 class="item-title">{{ project.title }}</h3>
                  <div class="item-badges">
                    <el-tag
                      v-if="project.featured"
                      size="small"
                      type="warning"
                      effect="dark"
                    >
                      特色
                    </el-tag>
                    <el-tag
                      :type="getStatusType(project.status)"
                      size="small"
                      effect="light"
                    >
                      {{ getStatusText(project.status) }}
                    </el-tag>
                  </div>
                </div>
                <div class="item-description">
                  {{ project.description || "暂无描述" }}
                </div>
              </div>

              <div class="item-footer">
                <div class="item-meta">
                  <span class="meta-item">
                    <i class="fa:eye"></i>
                    {{ project.views || 0 }}
                  </span>
                  <span class="meta-item">
                    <i class="fa:calendar"></i>
                    {{ formatDate(project.created_at) }}
                  </span>
                  <span class="meta-item">
                    <i class="fa:folder"></i>
                    {{
                      getCategoryName(project.categoryId || project.category)
                    }}
                  </span>
                </div>

                <!-- 技术栈 -->
                <div
                  v-if="project.technologies && project.technologies.length"
                  class="item-tech-stack"
                >
                  <div class="tech-tags">
                    <el-tag
                      v-for="tech in project.technologies.slice(0, 3)"
                      :key="tech"
                      size="small"
                      type="info"
                      effect="plain"
                    >
                      {{ tech }}
                    </el-tag>
                    <el-tag
                      v-if="project.technologies.length > 3"
                      size="small"
                      type="info"
                    >
                      +{{ project.technologies.length - 3 }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="item-actions">
              <el-button
                size="small"
                type="primary"
                :icon="Edit"
                @click="editProject(project.id)"
                class="action-btn"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                :icon="View"
                @click="previewProject(project.id)"
                class="action-btn"
              >
                预览
              </el-button>
              <el-dropdown>
                <el-button size="small" :icon="More" class="action-btn">
                  更多
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="toggleFeatured(project.id)">
                      <i class="fa:star"></i>
                      {{ project.featured ? "取消特色" : "设为特色" }}
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="project.status === 'draft'"
                      @click="publishProject(project.id)"
                    >
                      <i class="fa:play"></i>
                      发布
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="project.status === 'published'"
                      @click="archiveProject(project.id)"
                    >
                      <i class="fa:archive"></i>
                      归档
                    </el-dropdown-item>
                    <el-dropdown-item
                      divided
                      @click="deleteProject(project.id)"
                    >
                      <i class="fa:trash" style="color: #f56c6c"></i>
                      <span style="color: #f56c6c">删除</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div
        v-if="!loading && paginatedProjects.length === 0"
        class="empty-state"
      >
        <div class="empty-icon">
          <i class="fa:folder-open"></i>
        </div>
        <h3 class="empty-title">暂无项目</h3>
        <p class="empty-description">当前没有找到符合条件的项目</p>
        <el-button type="primary" :icon="Plus" @click="createProject">
          创建第一个项目
        </el-button>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="filteredProjects.length"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 导入对话框 -->
    <el-dialog v-model="showImportDialog" title="批量导入项目" width="600px">
      <div class="import-dialog">
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :auto-upload="false"
          :on-change="handleFileUpload"
          accept=".json,.csv"
        >
          <i class="fa:upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              支持 JSON 或 CSV 格式文件，文件大小不超过 10MB
            </div>
          </template>
        </el-upload>
      </div>
      <template #footer>
        <el-button @click="showImportDialog = false">取消</el-button>
        <el-button type="primary" @click="handleImport">导入</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import type { AdminProject } from "~/types/admin";
import type { ApiResponse } from "~/types/api";
import {
  Plus,
  Upload,
  Download,
  Edit,
  View,
  More,
} from "@element-plus/icons-vue";

// 响应式数据
const loading = ref(false);
const showImportDialog = ref(false);
const showAdvancedFilter = ref(false);
const selectedProjects = ref<AdminProject[]>([]);

// 筛选条件
const searchKeyword = ref("");
const filterStatus = ref("");
const filterCategory = ref("");
const filterFeatured = ref("");
const dateRange = ref<string[]>([]);
const sortField = ref("createdAt");
const sortOrder = ref("desc");

// 分页
const currentPage = ref(1);
const pageSize = ref(20);

// 统计数据
const stats = ref({
  total: 0,
  published: 0,
  draft: 0,
  archived: 0,
});

// 分类数据
interface Category {
  id: string;
  name: string;
  slug?: string;
  description?: string;
  post_count?: number;
}

const categories = ref<Category[]>([]);

// 项目数据
const projects = ref<AdminProject[]>([]);

// 计算属性：过滤后的项目
const filteredProjects = computed(() => {
  let result = projects.value;

  // 关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    result = result.filter(
      (project) =>
        project.title.toLowerCase().includes(keyword) ||
        project.description.toLowerCase().includes(keyword) ||
        project.technologies?.some((tech: string) =>
          tech.toLowerCase().includes(keyword)
        )
    );
  }

  // 状态筛选
  if (filterStatus.value) {
    result = result.filter((project) => project.status === filterStatus.value);
  }

  // 分类筛选
  if (filterCategory.value) {
    result = result.filter(
      (project) =>
        (project.categoryId || project.category) === filterCategory.value
    );
  }

  // 特色项目筛选
  if (filterFeatured.value) {
    const isFeatured = filterFeatured.value === "true";
    result = result.filter((project) => project.featured === isFeatured);
  }

  // 日期范围筛选
  if (dateRange.value && dateRange.value.length === 2) {
    const [startDate, endDate] = dateRange.value;
    if (startDate && endDate) {
      result = result.filter((project) => {
        const projectDate = new Date(project.created_at)
          .toISOString()
          .split("T")[0];
        if (projectDate) {
          return projectDate >= startDate && projectDate <= endDate;
        }
        return false;
      });
    }
  }

  // 排序
  result.sort((a, b) => {
    const field = sortField.value as keyof AdminProject;
    const order = sortOrder.value === "asc" ? 1 : -1;

    const aValue = a[field];
    const bValue = b[field];

    if (aValue === undefined || bValue === undefined) return 0;
    if (aValue < bValue) return -1 * order;
    if (aValue > bValue) return 1 * order;
    return 0;
  });

  return result;
});

// 分页后的项目
const paginatedProjects = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredProjects.value.slice(start, end);
});

// 方法
const refreshData = async () => {
  await loadProjects();
  ElMessage.success("数据已刷新");
};

const resetFilters = () => {
  searchKeyword.value = "";
  filterStatus.value = "";
  filterCategory.value = "";
  filterFeatured.value = "";
  dateRange.value = [];
  sortField.value = "createdAt";
  sortOrder.value = "desc";
  currentPage.value = 1;
};

const toggleProjectSelection = (project: AdminProject) => {
  const index = selectedProjects.value.findIndex((p) => p.id === project.id);
  if (index > -1) {
    selectedProjects.value.splice(index, 1);
  } else {
    selectedProjects.value.push(project);
  }
};

const createProject = () => {
  navigateTo("/admin/projects/0");
};

const editProject = (id: string) => {
  navigateTo(`/admin/projects/${id}`);
};

const previewProject = (id: string) => {
  window.open(`/project/${id}`, "_blank");
};

const deleteProject = async (id: string) => {
  ElMessageBox.confirm("确定要删除这个项目吗？此操作不可恢复。", "确认删除", {
    confirmButtonText: "确定删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        const response = await $fetch<ApiResponse>(
          `/api/admin/projects/${id}`,
          {
            method: "DELETE",
          }
        );

        if (response.success) {
          projects.value = projects.value.filter(
            (project) => project.id !== id
          );
          ElMessage.success("项目删除成功");
        } else {
          ElMessage.error(response.message || "项目删除失败");
        }
      } catch (error: any) {
        console.error("删除失败:", error);
        ElMessage.error(error.data?.message || "删除失败");
      }
    })
    .catch(() => {
      // 用户取消删除
    });
};

const toggleFeatured = async (id: string) => {
  try {
    const project = projects.value.find((p) => p.id === id);
    if (project) {
      const newFeatured = !project.featured;
      const response = await $fetch<ApiResponse>(`/api/admin/projects/${id}`, {
        method: "PUT",
        body: { featured: newFeatured },
      });

      if (response.success) {
        project.featured = newFeatured;
        ElMessage.success(newFeatured ? "已设为特色项目" : "已取消特色项目");
      } else {
        ElMessage.error(response.message || "操作失败");
      }
    }
  } catch (error: any) {
    console.error("操作失败:", error);
    ElMessage.error(error.data?.message || "操作失败");
  }
};

const publishProject = async (id: string) => {
  try {
    const project = projects.value.find((p) => p.id === id);
    if (project) {
      const response = await $fetch<ApiResponse>(`/api/admin/projects/${id}`, {
        method: "PUT",
        body: { status: "published" },
      });

      if (response.success) {
        project.status = "published";
        ElMessage.success("项目已发布");
      } else {
        ElMessage.error(response.message || "发布失败");
      }
    }
  } catch (error: any) {
    console.error("发布失败:", error);
    ElMessage.error(error.data?.message || "发布失败");
  }
};

const archiveProject = async (id: string) => {
  try {
    const project = projects.value.find((p) => p.id === id);
    if (project) {
      const response = await $fetch<ApiResponse>(`/api/admin/projects/${id}`, {
        method: "PUT",
        body: { status: "archived" },
      });

      if (response.success) {
        project.status = "archived";
        ElMessage.success("项目已完成");
      }else{
        ElMessage.error(response.message || "完成失败");
      }
    }
  } catch (error: any) {
    console.error("完成失败:", error);
    ElMessage.error(error.data?.message || "完成失败");
  }
};

// 批量操作
const batchPublish = async () => {
  try {
    const promises = selectedProjects.value.map((project) =>
      $fetch<ApiResponse>(`/api/admin/projects/${project.id}`, {
        method: "PUT",
        body: { status: "published" },
      })
    );

    await Promise.all(promises);

    selectedProjects.value.forEach((project) => {
      if (project) {
        project.status = "published";
      }
    });
    ElMessage.success(`已批量发布 ${selectedProjects.value.length} 个项目`);
    clearSelection();
  } catch (error: any) {
    console.error("批量发布失败:", error);
    ElMessage.error("批量发布失败");
  }
};

const batchArchive = async () => {
  try {
    const promises = selectedProjects.value.map((project) =>
      $fetch<ApiResponse>(`/api/admin/projects/${project.id}`, {
        method: "PUT",
        body: { status: "archived" },
      })
    );

    await Promise.all(promises);

    selectedProjects.value.forEach((project) => {
      if (project) {
        project.status = "archived";
      }
    });
    ElMessage.success(`已批量完成 ${selectedProjects.value.length} 个项目`);
    clearSelection();
  } catch (error: any) {
    console.error("批量完成失败:", error);
    ElMessage.error("批量完成失败");
  }
};

const confirmBatchDelete = () => {
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedProjects.value.length} 个项目吗？此操作不可恢复，请谨慎操作！`,
    "确认批量删除",
    {
      confirmButtonText: "确定删除",
      cancelButtonText: "取消",
      type: "warning",
      confirmButtonClass: "el-button--danger",
      customClass: "batch-delete-dialog",
      beforeClose: (action, instance, done) => {
        if (action === "confirm") {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = "删除中...";
          batchDelete().finally(() => {
            instance.confirmButtonLoading = false;
            instance.confirmButtonText = "确定删除";
            done();
          });
        } else {
          done();
        }
      },
    }
  ).catch(() => {
    // 用户取消删除
  });
};

const batchDelete = async () => {
  try {
    const promises = selectedProjects.value.map((project) =>
      $fetch<ApiResponse>(`/api/admin/projects/${project.id}`, {
        method: "DELETE",
      })
    );

    await Promise.all(promises);

    const idsToDelete = selectedProjects.value.map((p) => p.id);
    projects.value = projects.value.filter(
      (project) => !idsToDelete.includes(project.id)
    );
    ElMessage.success(`已删除 ${selectedProjects.value.length} 个项目`);
    clearSelection();
  } catch (error: any) {
    console.error("批量删除失败:", error);
    ElMessage.error("批量删除失败");
  }
};

const clearSelection = () => {
  selectedProjects.value = [];
};

const exportProjects = () => {
  ElMessage.info("导出功能开发中");
};

const handleFileUpload = () => {
  ElMessage.info("文件上传功能开发中");
};

const handleImport = () => {
  ElMessage.info("导入功能开发中");
};

const getStatusType = (
  status: string
): "success" | "warning" | "info" | "danger" => {
  const types = {
    published: "success" as const,
    inProgress: "warning" as const,
    archived: "info" as const,
    draft: "danger" as const,
  };
  return types[status as keyof typeof types] || "info";
};

const getCategoryName = (categoryId: string) => {
  const category = categories.value.find((cat) => cat.id == categoryId);
  return category ? category.name : categoryId;
};

const getStatusText = (status: string) => {
  const texts = {
    published: "已发布",
    inProgress: "进行中",
    archived: "已完成",
    draft: "草稿",
  };
  return texts[status as keyof typeof texts] || status;
};

const formatDate = (date: string) => {
  console.log(date);

  return new Date(date).toLocaleDateString("zh-CN");
};

const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1;
};

// 页面元数据
useHead({
  title: "项目管理 - 博客管理系统",
});

// 获取分类数据
const loadCategories = async () => {
  try {
    const response = await $fetch<ApiResponse<any[]>>("/api/categories");
    if (response.data) {
      categories.value = response.data;
    }
  } catch (error: any) {
    console.error("获取分类数据失败:", error);
    ElMessage.error("获取分类数据失败");
  }
};

// 获取项目数据
const loadProjects = async () => {
  try {
    loading.value = true;
    const response = await $fetch<ApiResponse<AdminProject[]>>(
      "/api/admin/projects"
    );
    if (response.data) {
      projects.value = response.data;
      await loadStats();
    }
  } catch (error: any) {
    console.error("获取项目数据失败:", error);
    ElMessage.error("获取项目数据失败");
  } finally {
    loading.value = false;
  }
};

// 获取统计数据
const loadStats = async () => {
  try {
    const response = await $fetch<
      ApiResponse<{
        total: number;
        published: number;
        archived: number;
        draft: number;
      }>
    >("/api/admin/projects/stats");
    if (response.data) {
      stats.value = {
        total: response.data.total,
        published: response.data.published,
        archived: response.data.archived,
        draft: response.data.draft,
      };
    }
  } catch (error: any) {
    console.error("获取统计数据失败:", error);
    ElMessage.error("获取统计数据失败");
  }
};

// 初始化
onMounted(() => {
  loadCategories();
  loadProjects();
});
</script>

<style scoped>
.projects-admin-page {
  padding: 0;
  animation: pageFadeIn 0.8s ease-out;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 页面进入动画 */
.projects-admin-page > * {
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 延迟动画 */
.admin-page-header {
  animation-delay: 0.1s;
}

.stats-row {
  animation-delay: 0.2s;
}

.filter-toolbar {
  animation-delay: 0.3s;
}

.projects-grid-container {
  animation-delay: 0.4s;
}

.pagination-container {
  animation-delay: 0.5s;
}

/* 页面头部 */
.admin-page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  padding: 0;
  margin-bottom: 1.5rem;
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    );
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.header-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.header-left {
  flex: 1;
  min-width: 300px;
}

.title-section {
  color: white;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-icon {
  font-size: 1.5em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.header-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.action-btn-primary {
  background: linear-gradient(135deg, #10b981, #34d399);
  border: none;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
}

.action-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, #0d9c6a, #2bbd87);
}

.action-btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
}

.action-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* 统计卡片 */
.stats-row {
  margin-bottom: 1.5rem;
}

.stat-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-gradient-bg {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(59, 130, 246, 0.1),
    transparent
  );
  animation: rotate 6s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover .stat-gradient-bg {
  opacity: 1;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 不同类型的统计卡片 */
.total-projects {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 50%);
}

.published-projects {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%);
}

.draft-projects {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 50%);
}

.archived-projects {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%);
}

.stat-content {
  position: relative;
  z-index: 2;
}

.stat-content .stat-number {
  font-size: 2.25rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1;
  background: linear-gradient(135deg, #1f2937, #374151);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-content .stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
  font-weight: 500;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.trend-neutral {
  color: #6b7280;
}

.stat-icon {
  position: relative;
  z-index: 2;
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  transition: all 0.3s ease;
}

.total-projects .icon-wrapper {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.published-projects .icon-wrapper {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.draft-projects .icon-wrapper {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: white;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.archived-projects .icon-wrapper {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.stat-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

/* 筛选工具栏 */
.filter-toolbar {
  background: white;
  border-radius: 1rem;
  padding: 0;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.filter-header {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-title i {
  color: #3b82f6;
  font-size: 1.25rem;
}

.filter-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.search-btn {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  border: none;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.reset-btn {
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid rgba(107, 114, 128, 0.2);
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background: rgba(107, 114, 128, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.1);
}

.advanced-btn {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: #f59e0b;
  transition: all 0.3s ease;
}

.advanced-btn:hover,
.advanced-btn.active {
  background: rgba(245, 158, 11, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}

.filter-content {
  padding: 1.5rem;
}

.filter-item {
  margin-bottom: 1rem;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.filter-label i {
  color: #3b82f6;
  font-size: 0.875rem;
}

.custom-input :deep(.el-input__inner:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-select :deep(.el-input__inner) {
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.custom-select :deep(.el-input__inner:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-date-picker :deep(.el-input__inner) {
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.custom-date-picker :deep(.el-input__inner:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 高级筛选 */
.advanced-filter {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f1f5f9;
}

.advanced-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.advanced-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}

.advanced-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #f1f5f9, #e5e7eb, #f1f5f9);
}

/* 批量操作栏 */
.batch-actions {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  animation: slideDown 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

.batch-actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #3b82f6, #10b981);
  border-radius: 1rem 0 0 1rem;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.batch-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.selected-count {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(59, 130, 246, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.selected-count i {
  color: #3b82f6;
  font-size: 1.1rem;
}

.batch-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.batch-btn {
  border-radius: 0.75rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid transparent;
}

.batch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.batch-btn-danger:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.batch-btn-cancel:hover {
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.2);
}

.batch-btn i {
  font-size: 0.875rem;
}

/* 批量删除确认对话框样式 */
:deep(.batch-delete-dialog) {
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

:deep(.batch-delete-dialog .el-message-box__header) {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border-bottom: 1px solid #fee2e2;
  padding: 1.5rem;
  border-radius: 1rem 1rem 0 0;
}

:deep(.batch-delete-dialog .el-message-box__title) {
  color: #dc2626;
  font-weight: 700;
  font-size: 1.125rem;
}

:deep(.batch-delete-dialog .el-message-box__content) {
  padding: 2rem 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
}

:deep(.batch-delete-dialog .el-message-box__btns) {
  padding: 1rem 1.5rem 1.5rem;
  gap: 0.75rem;
}

:deep(.batch-delete-dialog .el-button--danger) {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border: none;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

:deep(.batch-delete-dialog .el-button--danger:hover) {
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

:deep(.batch-delete-dialog .el-button--default) {
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
}

:deep(.batch-delete-dialog .el-button--default:hover) {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

/* 项目列表容器 */
.projects-list-container {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 1.5rem;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

/* 项目列表项 */
.project-item {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid #f0f0f0;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

@keyframes itemAppear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-item {
  animation: itemAppear 0.6s ease-out;
}

/* 交错动画 */
.projects-list .project-item:nth-child(odd) {
  animation-delay: 0.1s;
}

.projects-list .project-item:nth-child(even) {
  animation-delay: 0.2s;
}

/* 特色项目特殊效果 */
.project-item.featured-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-radius: 1rem 0 0 1rem;
}

/* 选中状态 */
.project-item.selected-item {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}

.project-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

/* 选择框 */
.item-selection {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

/* 项目内容布局 */
.item-content {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  min-height: 80px;
}

/* 缩略图 */
.item-thumbnail {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f1f5f9;
  transition: all 0.3s ease;
}

.project-item:hover .item-thumbnail {
  border-color: #3b82f6;
  transform: scale(1.05);
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-item:hover .thumbnail-image {
  transform: scale(1.1);
}

.thumbnail-placeholder {
  color: #cbd5e1;
  font-size: 2rem;
  opacity: 0.7;
}

/* 项目详情 */
.item-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.item-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item-title-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.item-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  min-width: 200px;
  background: linear-gradient(135deg, #1e293b, #374151);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 超出显示省略号，不换行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-badges {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.item-description {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 项目底部信息 */
.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.item-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
  transition: color 0.3s ease;
}

.project-item:hover .meta-item {
  color: #64748b;
}

.meta-item i {
  font-size: 0.9rem;
  color: #3b82f6;
}

/* 技术栈 */
.item-tech-stack {
  flex-shrink: 0;
}

.tech-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tech-tags .el-tag {
  transition: all 0.3s ease;
}

.tech-tags .el-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 操作按钮 */
.item-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.action-btn {
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 骨架屏样式 */
.skeleton-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

.skeleton-selection {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 20px;
  height: 20px;
  background: #e5e7eb;
  border-radius: 4px;
}

.skeleton-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.skeleton-thumbnail {
  width: 80px;
  height: 80px;
  background: #e5e7eb;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.skeleton-info {
  flex: 1;
  min-width: 0;
}

.skeleton-title {
  width: 70%;
  height: 24px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.skeleton-description {
  width: 90%;
  height: 16px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.skeleton-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.skeleton-meta-item {
  width: 80px;
  height: 20px;
  background: #e5e7eb;
  border-radius: 10px;
}

.skeleton-tech {
  width: 60%;
  height: 20px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.skeleton-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.skeleton-button {
  width: 80px;
  height: 32px;
  background: #e5e7eb;
  border-radius: 0.5rem;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 1.5rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f5f9;
  margin: 1rem;
}

.empty-icon {
  font-size: 6rem;
  color: #cbd5e1;
  margin-bottom: 2rem;
  opacity: 0.8;
  animation: float 3s ease-in-out infinite;
}

.empty-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #374151;
  margin: 0 0 1rem 0;
  background: linear-gradient(135deg, #374151, #4b5563);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.empty-description {
  color: #64748b;
  margin: 0 0 2.5rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state .el-button {
  border-radius: 1rem;
  padding: 1rem 2.5rem;
  font-weight: 700;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.empty-state .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}

/* 分页容器 */
.pagination-container {
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

/* 导入对话框 */
.import-dialog {
  padding: 1rem 0;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
  }
}

@media (max-width: 1200px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .project-card {
    padding: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .admin-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .header-actions {
    justify-content: flex-start;
  }

  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .project-thumbnail {
    width: 80px;
    height: 80px;
  }

  .project-title .title {
    font-size: 1.125rem;
  }
}

@media (max-width: 768px) {
  .stats-row {
    margin-bottom: 0.75rem;
  }

  .el-col {
    margin-bottom: 1rem;
  }

  .filter-toolbar .el-row {
    flex-direction: column;
  }

  .filter-toolbar .el-col {
    margin-bottom: 1rem;
  }

  .header-actions {
    flex-direction: column;
    width: 100%;
  }

  .header-actions .el-button {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  .batch-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
  }

  .batch-info {
    justify-content: center;
  }

  .batch-buttons {
    justify-content: center;
    gap: 0.5rem;
  }

  .batch-btn {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .card-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .project-thumbnail {
    align-self: center;
    margin-bottom: 0.75rem;
    width: 100px;
    height: 100px;
  }

  .project-title {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .project-meta {
    justify-content: center;
    gap: 1rem;
  }

  .card-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .project-card {
    padding: 1.5rem;
  }
}

@media (max-width: 640px) {
  .admin-page-header {
    padding: 1.5rem;
  }

  .header-left .page-title {
    font-size: 1.5rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-content .stat-number {
    font-size: 1.75rem;
  }

  .stat-icon {
    font-size: 1.75rem;
  }

  .filter-toolbar {
    padding: 1rem;
  }

  .batch-actions {
    padding: 0.875rem;
    gap: 0.75rem;
  }

  .batch-info {
    justify-content: center;
  }

  .selected-count {
    font-size: 0.9rem;
    padding: 0.375rem 0.75rem;
  }

  .batch-buttons {
    gap: 0.375rem;
  }

  .batch-btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
    min-width: auto;
    flex: 1;
  }

  .batch-btn i {
    font-size: 0.8rem;
  }

  .pagination-container {
    padding: 1rem;
  }

  .project-card {
    padding: 1.25rem;
  }

  .projects-grid {
    padding: 1rem;
    gap: 1rem;
  }

  .tech-tags {
    justify-content: center;
  }

  .project-thumbnail {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  .batch-actions {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .batch-info {
    width: 100%;
    justify-content: center;
  }

  .selected-count {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.5rem;
  }

  .batch-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .batch-btn {
    padding: 0.5rem;
    font-size: 0.75rem;
    min-width: auto;
    justify-content: center;
  }

  .batch-btn i {
    font-size: 0.75rem;
  }

  .projects-grid {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .project-card {
    padding: 1.25rem;
  }

  .card-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .action-btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .project-thumbnail {
    width: 70px;
    height: 70px;
  }

  .project-title .title {
    font-size: 1.1rem;
  }
}

@media (max-width: 375px) {
  .projects-grid {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .project-card {
    padding: 1rem;
  }

  .card-header {
    gap: 0.75rem;
  }

  .project-thumbnail {
    width: 60px;
    height: 60px;
  }
}

/* 操作按钮样式 */
:deep(.el-button--small) {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}

/* 下拉菜单样式 */
:deep(.el-dropdown-menu) {
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

:deep(.el-dropdown-menu__item) {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

:deep(.el-dropdown-menu__item:hover) {
  background-color: #f3f4f6;
}

:deep(.el-dropdown-menu__item--divided) {
  border-top: 1px solid #f3f4f6;
}

/* 加载状态 */
:deep(.el-loading-mask) {
  border-radius: 0.75rem;
}

/* 分页样式 */
:deep(.el-pagination) {
  justify-content: center;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next),
:deep(.el-pagination .number) {
  border-radius: 0.5rem;
  margin: 0 0.125rem;
  border: 1px solid #e5e7eb;
}

:deep(.el-pagination .active) {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* 警告框样式 */
:deep(.el-alert) {
  border-radius: 0.75rem;
}

:deep(.el-alert__content) {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* 日期选择器样式 */
:deep(.el-date-editor) {
  width: 100%;
}

:deep(.el-date-editor .el-input__inner) {
  border-radius: 0.5rem;
}

/* 上传组件样式 */
:deep(.el-upload-dragger) {
  border-radius: 0.75rem;
  border: 2px dashed #d1d5db;
  transition: all 0.3s ease;
}

:deep(.el-upload-dragger:hover) {
  border-color: #3b82f6;
  transform: translateY(-2px);
}

/* 复选框样式 */
:deep(.el-checkbox) {
  margin-right: 0;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

/* 标签样式优化 */
:deep(.el-tag) {
  border-radius: 0.375rem;
  font-weight: 500;
}

/* 统计卡片悬停效果 */
.stat-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 筛选工具栏优化 */
.filter-toolbar {
  transition: all 0.3s ease;
}

.filter-toolbar:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 页面头部阴影效果 */
.admin-page-header {
  transition: all 0.3s ease;
}

.admin-page-header:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 暗色主题适配 */
.dark .admin-page-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .header-background {
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    );
}

.dark .action-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .action-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* 统计卡片暗色主题适配 */
.dark .stat-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dark .stat-card:hover {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.dark .stat-content .stat-number {
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .stat-content .stat-label {
  color: #94a3b8;
}

.dark .stat-trend .trend-up {
  color: #10b981;
}

.dark .stat-trend .trend-down {
  color: #ef4444;
}

.dark .stat-trend .trend-neutral {
  color: #94a3b8;
}

/* 不同类型的统计卡片暗色主题 */
.dark .total-projects {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 50%);
}

.dark .published-projects {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, #065f46 0%, #1e293b 50%);
}

.dark .draft-projects {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, #78350f 0%, #1e293b 50%);
}

.dark .archived-projects {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, #065f46 0%, #1e293b 50%);
}

.dark .total-projects .icon-wrapper {
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.dark .published-projects .icon-wrapper {
  background: linear-gradient(135deg, #047857, #10b981);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.dark .draft-projects .icon-wrapper {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: white;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.dark .archived-projects .icon-wrapper {
  background: linear-gradient(135deg, #047857, #10b981);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.dark .stat-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

.dark .filter-toolbar {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .filter-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .filter-title {
  color: #f8fafc;
}

.dark .batch-actions {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .selected-count {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #f8fafc;
}

/* 项目列表区域暗色主题适配 */
.dark .projects-list-container {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .project-item {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .project-item:hover {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  border-color: #3b82f6;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.dark .project-item.featured-item::before {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.dark .project-item.selected-item {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  border-color: #3b82f6;
}

.dark .item-title {
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .item-description {
  color: #94a3b8;
}

.dark .meta-item {
  color: #64748b;
}

.dark .project-item:hover .meta-item {
  color: #94a3b8;
}

.dark .item-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .item-thumbnail {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.dark .project-item:hover .item-thumbnail {
  border-color: #3b82f6;
}

.dark .thumbnail-placeholder {
  color: #475569;
}

/* 骨架屏暗色主题 */
.dark .skeleton-item {
  background: #334155;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .skeleton-selection,
.dark .skeleton-thumbnail,
.dark .skeleton-title,
.dark .skeleton-description,
.dark .skeleton-meta-item,
.dark .skeleton-button {
  background: #475569;
}

/* 空状态暗色主题 */
.dark .empty-state {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .empty-title {
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .empty-description {
  color: #94a3b8;
}

.dark .empty-icon {
  color: #475569;
}

.dark .pagination-container {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
